<template>
	<div v-if="detail">
		<nav-bar :title="detail.summary" left-arrow @clickLeft="back" />
		<div class="msg-detail pd-all">
		<h4 class="font-lg">{{detail.summary}}</h4>
		<van-row type="flex" justify="space-between" class="c-gray">
			<van-col span="10">类型：{{detail.title || detail.kind_name}}</van-col>
			<van-col span="10" class="text-right">{{detail.created_at}}</van-col>
		</van-row>
		<div class="van-hairline--top detail-content" v-html="detail.content"></div>
		</div>
	</div>
</template>
<script>
import NavBar from "@cmpt/header/navbar"
import {
	Row,
	Col
} from 'vant'
import { getMsgDetail } from "@/api/modules/message"
import { formatTime } from '@utils/utils'
export default {
	name: 'msg-detail',
	components: {
		[NavBar.name]: NavBar,
		[Row.name]: Row,
		[Col.name]: Col,
	},
	data() {
		return {
			detail: null
		}
	},
	created() {
		this.onLoad()
	},
	methods: {
		back () {
			this.$goPageBack()
		},
		async onLoad () {
			const id = this.$getUrlParam('id') || null
			if(!id){
				alert('需要公告id，以获取公告详情')
				this.$goPageBack()
				return
			}
			getMsgDetail(id).then(res => {
					let detail = res.data.message
					detail.created_at = formatTime(detail.created_at)
					this.detail = detail
					document.title = detail.summary
				})
		}
	}
}
</script>
<style lang="less" scoped>
.msg-detail {
	background-color: white;
	.c-gray {
		margin: 10px 0;
	}
	.detail-content {
		img {
			max-width: 100%;
			width: inherit;
			height: inherit;
			border-radius: 5px;
		}
	}
	.detail-content {
		padding: 20px 0;
		& > * {
			font-size: 15px;
			line-height: 1.5;
		}
		img {
			max-width: 100%;
		}
	}
}
</style>